<template>
	<view class="content clear-both">
		<scroll-view scroll-y class="scroll-left">
			<view :class="['scroll-left-item','fs16','color3',{act:classifyid==item.ClassifyId}]" v-for="(item,index) in classifylist"
			 :key="index" @click="checkProductlistByClassifyid(item.ClassifyId)">
				<view :class="['items',{act:classifyid==item.ClassifyId}]">{{item.ClassifyName}}</view>
			</view>
		</scroll-view>
		<scroll-view scroll-y class="scroll-right">
			<view class="scroll-right-item clear-both" v-for="(item,index) in productlist" :key="index" @click="goHref(item.Href)">
				<image :src="item.ImageSrc" mode="aspectFill" class="itemImg float-l"></image>
				<view class="float-r itemr">
					<view class="cakeName fs16 color3">{{item.CommodityName}}</view>
					<view style="height: 5.334vw;" v-if="item.Title">
						<view class="cakeInfo fs12 colorFF6" v-html="item.Title"></view>
					</view>
					
					<view v-if="!item.Title" style="height: 3.2vw;"></view>
					<view class="footer clear-both">
						<text class="fs16 colorm">¥{{item.DiscountPrice || item.UnitPrice}}</text>
						<text class="fs14 color9">/{{item.Size}}</text>
						<text class="fs14 colorc del" v-show="item.DiscountPrice<item.UnitPrice">¥{{item.UnitPrice}}</text>
						<view class="footers float-r" @click.stop="openCartBox(item)">
							<image src="../../static/tabbar/index/goods_fill.png" class="footerImg"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="nocontenttext">
				<text>{{nocontenttext}}</text>
			</view>

		</scroll-view>
		<!--购物车弹窗-->
		<view class="main" v-show="showCartBox">
			<view class="white-box">
				<view v-for="(box,idx) in packagelist" :key="idx" v-show="box.PackageName==choosepackname">
				<image src="/static/tabbar/index/close.png" mode="aspectFill" class="colose-img" @tap="closeCartBox"></image>
				<view class="header clear-both">
					<image :src="box.ImageUrl" mode="aspectFill" class="float-l cake-img"></image>
					<view class="float-l cake-info">
						<view>
							<text class="fs20 colorm font-weight">¥{{box.DiscountPrice||box.UnitPrice}}</text><text class="fs14 color9">/{{box.Size}}</text>
						</view>
						<view class="fs16 color3 font-weight cake-name"><text>{{box.CommodityName}}</text></view>
						<view class="fs14">
							<text class="colorFF6">已选择：</text>
							<text class="color6">{{box.PackageName}}</text>
						</view>
					</view>
				</view>
				<view class="guige clear-both">
					<view class="fs16 font-weight color3">规格</view>
					<view class="fs12 item float-l " 
					v-for="(s,index) in box.PackageNameList" 
					:key="index"
					:class="{'choose':s==choosepackname}"
					@tap="chooseCartBox(s)"
					>{{s}}</view>
				</view>
				<view class="num clear-both">
					<view class="float-l fs16 font-weight color3">数量</view>
					<view class="float-r clear-both">
						<view class="float-l fs20 color6 options" @tap="updateCartNum(box,-1)">-</view>
						<view class="float-l fs14 color3 nums">{{box.Num}}</view>
						<view class="float-l fs20 colorFF6 options options2" @tap="updateCartNum(box,1)">+</view>
					</view>
				</view>
				<view class="done fs18 font-weight nodone" @tap="addTocart(box)">加入购物车</view>
			</view>
			</view>
		</view>
	</view>
</template>
<script src="../../api/tabbar/productlist.js"></script>
<style>
	page {
		width: 100%;
		height: 100%;
		background: #fff;
	}
</style>
<style scoped="true" lang="scss">
	.content {
		width: 100%;
		height: 100%;

		.scroll-left {
			width: 17.0667vw;
			height: 100%;
			float: left;
			background: #f3f3f3;

			.scroll-left-item {
				width: 100%;
				padding: 2.66665vw 0;

				.items {
					width: 100%;
					height: 8.5334vw;
					line-height: 8.5334vw;
					text-align: center;
					white-space: nowrap;
				}

				.act {
					color: #00449F;
					border-left: 1.334vw solid #00449F;
				}
			}

			.act {
				background: #fff;
			}
		}

		.scroll-right {
			width: 82.9334vw;
			height: 100%;
			float: right;

			.scroll-right-item {
				padding: 4.2334vw 0;
				margin: 0 4.2334vw;
				border-bottom: 2upx solid #F2F2F2;
				min-height: 21.334vw;

				.itemImg {
					width: 21.334vw;
					height: 21.334vw;
					border-radius: 1.6vw;
				}

				.itemr {
					margin-left: 2.1334vw;
					width: 50.9992vw;
					position: relative;
					min-height: 21.334vw;

					.cakeName {
						width: 100%;
						white-space: normal;
					}

					.cakeInfo {
						padding: 0 1.6vw;
						display: inline-block;
						height: 5.334vw;
						text-align: center;
						line-height: 5.334vw;
						background: #E5ECF5;
						border-radius: 1.0667vw;
						margin-top: 1.6vw;
					}

					.footer {
						margin-top: 3.2vw;
						height: 5.8667vw;
						line-height: 5.8667vw;
						width: 100%;

						.del {
							margin-left: 2vw;
							text-decoration: line-through;
						}

						.footers {
							height: 5.8667vw;
							width: 5.8667vw;
							.footerImg {
								width: 100%;
								height: 100%;
								display: block;
							}
						}

					}
				}

			}

			.nocontenttext {
				text-align: center;
				padding: 3vw 0;
				font-size: 3.7334vw;
				color: #999;
			}
		}

		.main {
			width: 100%;
			height: 100%;
			position: fixed;
			left: 0;
			/* #ifdef MP-WEIXIN */
			bottom: 0;
			/* #endif */
			/* #ifdef H5 */
			bottom: var(--window-bottom);
			/* #endif */
			z-index: 9;
			background: rgba(0, 0, 0, 0.5);

			.white-box {
				min-height: 107vw;
				background: #fff;
				width: 100%;
				position: absolute;
				left: 0;
				bottom: 0;
				border-top-left-radius: 4.2667vw;
				border-top-right-radius: 4.2667vw;
				overflow: hidden;
				padding-bottom: 13.8667vw;
				animation: height .4s;

				.colose-img {
					position: absolute;
					width: 5.8667vw;
					height: 5.8667vw;
					right: 4.2667vw;
					top: 4.2667vw;
					z-index: 99999;
				}

				.header {
					height: 26.667vw;
					margin: 0 4.2667vw;
					padding: 5.334vw 0;
					border-bottom: 2upx solid #f2f2f2;

					.cake-name {
						margin: 1vw 0;
					}

					.cake-img {
						height: 26.667vw;
						width: 26.667vw;
						margin-right: 3vw;
					}

					.cake-info {
						height: 26.667vw;
						width: 61.6vw;
					}
				}

				.guige {
					margin: 0 4.2667vw;
					padding: 5.334vw 0;
					border-bottom: 2upx solid #f2f2f2;

					.item {
						height: 7.4667vw;
						line-height: 7.4667vw;
						border-radius: 3.7334vw;
						background: #f2f2f2;
						color: #666;
						padding: 0 4.8vw;
						margin-top: 3.2vw;
						margin-right: 2.1334vw;
					}

					.choose {
						background: #E5ECF5;
						color: #00449F;
					}

					.unchoose {
						color: #BCBCBC;
					}
				}

				.num {
					height: 6.4vw;
					margin: 4vw 4.2667vw 8.5334vw 4.2667vw;
					line-height: 6.4vw;

					.options {
						width: 6.4vw;
						height: 6.4vw;
						border: 2upx solid #e7e7e7;
						text-align: center;
						border-top-left-radius: .8vw;
						border-bottom-left-radius: .8vw;
					}

					.options2 {
						border-radius: 0;
						border-top-right-radius: .8vw;
						border-bottom-right-radius: .8vw;
					}

					.nums {
						width: 10.667vw;
						text-align: center;
						border-top: 2upx solid #e7e7e7;
						border-bottom: 2upx solid #e7e7e7;
						height: 6.4vw;
						line-height: 6.4vw;
					}
				}

				.done {
					height: 13.8667vw;
					line-height: 13.8667vw;
					text-align: center;
					width: 100%;
					color: #fff;
					background: #00449F;
					position: absolute;
					bottom: 0;
					left: 0;
				}

				.nodone {
					color: rgba(255, 255, 255, .8);
				}
			}
		}

		@keyframes height {
			from {
				bottom: -100%;
			}

			to {
				bottom: 0;
			}
		}
	}
</style>
